// directive 自定义指令的js
import Vue from 'vue'
import $ from 'jquery'
import {DEVELOPMENT, PRODUCTION} from './config'

let apiHost = process.env.NODE_ENV === 'development' ? DEVELOPMENT : PRODUCTION


// let $ = window.jQuery
// 注册一个全局自定义指令 v-DomHeight 这个指令是操作index的swipe快DOM的高度
let DomHeight = Vue.directive('DomHeight', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) { //
  }
})

//上传图片头像
let DomFILE = Vue.directive('DomFILE', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) { //
    $("#inputfile").change(function(){
      var formData = new FormData($("#frm_identityA")[0]);
      $.ajax({
        url:`http://${apiHost.USER_API_HOST}/artup-user-api/f/modifyUserPhoto`,
        type:'POST',
        data:formData,
        cache: false,
        contentType: false,    //不可缺
        processData: false,    //不可缺
        success:function(data){
          $(".account-info .main .Icon-img").css("backgroundImage","url("+data.data.photoThumbUrl+")")
          // $("#frm_identityA .avatar").attr("src",data.data.photoThumbUrl)
          $(".right-platform .avatar").attr("src",data.data.photoThumbUrl)
          localStorage.setItem("avatar",data.data.photoThumbUrl)
        }
      })
    })
  }
})


//上传图片头像
// let DomFILE = Vue.directive('DomFILE', {
//   // 当绑定元素插入到 DOM 中。
//   inserted: function (el) { //
//     console.log(el)
//     if (!(window.File || window.FileReader || window.FileList || window.Blob)) {
//       console.log("浏览器不支持新属性")
//       return;
//     }
//     //表单改变的时候，值不能空就自动上传
//     var elementFile = document.getElementById("filesInput")
//     elementFile.addEventListener("change", fn, false)
//
//     function fn() {
//       if (elementFile.value) {//如果表单值改变了
//         //如果类型是image的话
//         if (elementFile.files[0].type.indexOf("image") != -1) {
//           //得到文件之前要new一个fileReader对象
//           var fd = new FileReader();
//           console.log(elementFile.files[0])
//           console.log(fd)
//           // fd.readAsDataURL(elementFile.files[0])
//           fd.readAsBinaryString(elementFile.files[0])
//           fd.onload = function () {
//             //把得到的banse64传入图片
//             console.log(fd)
// //					利用formdata上传图片
//             var formData = new FormData();//构造空对象，下面用append 方法赋值。
//             formData.append("utoken", "c146516f6cf649f4b33742c551634250")
//             formData.append("file", fd.result)
//             $.ajax({
//               url: "http://testuser.artup.com/artup-user-api/f/modifyUserPhoto",
//               type: 'POST',
//               headers:{"Content-Type":"multipart/form-data;boundary----WebKitFormBoundaryMiOu2bOqe7dSbHce"},
//               // data : {
//               // 	"passid":CONFIG.PATH_ID,
//               // 	"imagesBase64":fd.result.split(',')[1]
//               // },
//               data: formData,
//               /**
//                * 必须false才会避开jQuery对 formdata 的默认处理
//                * XMLHttpRequest会对 formdata 进行正确的处理
//                */
//               processData: false,
//               /***必须false才会自动加上正确的Content-Type  */
//               contentType: false,
//               success: function (responseStr) {
//                 console.log("成功：" + JSON.stringify(responseStr));
//                 console.log(responseStr)
//               },
//               error: function (responseStr) {
//                 console.log("失败:" + JSON.stringify(responseStr));//将    json对象    转成    json字符串。
//               }
//             })
//           }
//         } else {
//           alert("请上传正确的图片类型");
//         }
//       }
//     }
//   }
// })
// 让元素可以拖拽到元素框，正确的回显的指令
let DomDrap = Vue.directive('DomDrap', {
  inserted: function (el) {
    // 被拖动的元素
    let oDrapDiv = $('.fonter_box_img > ul >li >img')
    // 拖动到哪里去
    let oDrap = document.querySelectorAll('.time_main_left .time_bg  .drapBox')
    let i = 0
    for (; i < oDrapDiv.length; i++) {
      oDrapDiv[i].index = i
      // console.log(oDrapDiv[i].src)
      oDrapDiv[i].ondragstart = function (ev) {
        // ev.preventDefault();
        ev = ev || window.event
        // 这里指定setDate的index=i
        ev.dataTransfer.setData('name', this.index)
        ev.dataTransfer.setData('oSrc', this.src)
        this.style.background = 'green'
      }
    }
    i = 0
    for (; i < oDrap.length; i++) {
      oDrap[i].ondragover = function (ev) {
        // enter和leave之间连续触发
        // 要想触发drop事件，就 必须在dragover当中阻止默认事件
        // document.title = i++;
        ev.preventDefault()
      }
      // 拖动结束
      oDrap[i].ondrop = function (ev) {
        ev.preventDefault()
        ev.stopPropagation()// 预防ff图片拖出打开
        // console.log(ev.dataTransfer.getData('name'))
        // console.log(ev.dataTransfer.getData('oSrc'))
        $(ev.target).find('>img').attr('src', ev.dataTransfer.getData('oSrc'))
        // 计算位置
        // console.log(dragThumb)
        // setTimeout(function () {
        //   dragThumb($(ev.target).find('>img'), $(ev.target))
        // }, 100)
      }
    }
  }
})
export {DomHeight, DomDrap}
